<template>
  <div id="farmHouseTJ">
    <div class="title">
      <span @click="onClickLeft" style="position: absolute;left: 5px;display: flex;align-items: center;font-size: 14px;">
        <van-icon name="arrow-left" />
        返回
      </span>
      农房统计
    </div>
    <div style="width: 100%; height: calc(100vh - 50px);overflow: auto;">
      <div v-for="item in titles" :key="item" class="hederStyle">
        <div class="hederStyle1">
          <span style="border-left:3.4px solid #007aff;"></span>
          <span style="padding-left:8px">{{item.name}}</span>
          <div class="topButton" v-if="item.tabs">
            <el-button type="primary" @click="handletabClick(0)" size='mini' plain>
              {{item.tabs[0]}}
            </el-button>
            <el-button type="primary" @click="handletabClick(1)" size='mini' plain>
              {{item.tabs[1]}}
            </el-button>
          </div>
        </div>
        <component :is="item.components"></component>
        <div style="height:20px;background: #f6f6f6;margin-left:-10px"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Pubsub from "pubsub-js";
import farmHouseZL from './child/farmHouseZL.vue'
import framHouseJS from './child/framHouseJS.vue'
import framHouseAQ from './child/framHouseAQ.vue'
import framHouseJW from './child/farmHouseJW.vue'
import framHouseZS from './child/farmHouseZS.vue'
import framHouseXC from './child/farmHouseXC.vue'
export default {
  data () {
    return {
      titles: [
        {
          name: '农房总览',
          components: farmHouseZL
        },
        {
          name: '农房建设',
          components: framHouseJS,
          tabs: [
            "审批建房", "农污治理"
          ]
        },
        {
          name: '农房安全',
          components: framHouseAQ
        },
        {
          name: '农房解危',
          components: framHouseJW
        },
        {
          name: '农房增收',
          components: framHouseZS
        },
        {
          name: '农房风貌',
          tabs: [
            "通用图集", "典型案例",

          ],
          components: framHouseXC
        }
      ]
    }

  },
  components: {
    farmHouseZL,
    framHouseAQ
  },
  methods: {
    onClickLeft () {
      this.$router.push({
        path: "/FeatureList",
      });
    },
    handletabClick (data) {
      Pubsub.publish('projectDetails', data);
    }
  }
}
</script>

<style lang="scss" scoped>
#farmHouseTJ {
  height: 100vh;
  background: #ffffff;
  font-size: 14px;
  .title {
    width: 100%;
    height: 50px;
    background: #007aff;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    position: relative;
  }
  .hederStyle {
    // height: 34px;
    margin-left: 10px;
    line-height: 34px;
    color: black;
    .hederStyle1 {
      border-bottom: 1px solid #9b9b9b;
    }
    .topButton {
      float: right;
      padding-right: 4px;
    }
  }
}
</style>

